<template>
  <div>
    <van-nav-bar title="修改用户资料" left-arrow @click-left="$router.back()" />
    <van-cell title="头像" is-link>
      <van-image
        width="40"
        height="40"
        :src="'http://124.223.14.236:8060/' + list.icon"
        fit="cover"
        round
        @click="$refs.avatar.chooseFile()"
      />
    </van-cell>
    <van-uploader :after-read="afterRead" v-show="false" ref="avatar" />
    <van-cell
      title="昵称"
      is-link
      :value="list.username"
      @click="showUsername"
    />
    <van-dialog
      v-model="Usernameshow"
      title="昵称"
      show-cancel-button
      @confirm="UsernameFn"
      @close="newUsername = ''"
    >
      <van-field
        v-model.trim="newUsername"
        type="newUsername"
        label="新昵称："
        ref="showUsername"
      />
    </van-dialog>

    <van-cell title="手机号" is-link :value="list.mobile" @click="showMobile" />
    <!-- <van-action-sheet
      v-model="Mobileshow"
      position="top"
      :style="{ height: '30%' }"
    >
      <van-nav-bar
        title="修改手机号"
        left-text="取消"
        right-text="确认"
        @click-left="Mobileshow = false"
        @click-right="onClickRight()"
      />
      <van-field v-model="newMobile" label="新手机号：" />
    </van-action-sheet> -->
    <van-dialog
      v-model="Mobileshow"
      title="手机号"
      show-cancel-button
      @confirm="MobileFn"
      @close="newMobile = ''"
    >
      <van-field
        v-model.trim="newMobile"
        type="newMobile"
        label="新手机号："
        ref="showMobile"
        :rules="rules.mobile"
      />
    </van-dialog>
    <van-cell
      title="性别"
      is-link
      :value="list.sex ? '女' : '男'"
      @click="showGender = true"
    />

    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar
        left-text="取消"
        @click-left="showGender = false"
        title="修改性别"
      ></van-nav-bar>
      <van-cell is-link title="男" @click="updateGender(0)" />
      <van-cell is-link title="女" @click="updateGender(1)" />
    </van-popup>

    <van-cell
      title="出生日期"
      is-link
      :value="list.birthday"
      @click="showBirthdayFn"
    />
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        type="date"
        title="选择年月日"
        @confirm="updateBirthday"
        @cancel="showBirthday = false"
      />
    </van-popup>
    <van-cell
      title="家庭住址"
      is-link
      :label="list.address"
      size="large"
      @click="showAddress"
    />
    <van-dialog
      v-model="addressshow"
      title="家庭地址"
      show-cancel-button
      @confirm="addressFn"
      @close="newaddress = ''"
    >
      <van-field
        v-model.trim="newaddress"
        type="newaddress"
        label="新地址："
        ref="showaddress"
      />
    </van-dialog>
    <van-cell
      title="个性留言"
      is-link
      :label="list.notes"
      @click="showNotes"
      size="large"
    />
    <van-dialog
      v-model="notesshow"
      title="个性留言"
      show-cancel-button
      @confirm="notesFn"
      @close="newnotes = ''"
    >
      <van-field
        v-model.trim="newnotes"
        rows="2"
        autosize
        label="留言"
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
        ref="showNotes"
      />
    </van-dialog>
    <van-popover placement="top" />
    <!-- <div class="mask" v-if="isShowMask">
      <VueCropper
        :img="img"
        autoCrop
        autoCropWidth="120"
        autoCropHeight="120"
        fixed
        ref="cropper"
      ></VueCropper>
      <van-button type="primary" class="confirm" @click="crop">确定</van-button>
      <van-button type="primary" class="cancel" @click="isShowMask = false">
        取消
      </van-button>
    </div> -->
  </div>
</template>

<script>
// import { VueCropper } from 'vue-cropper'
import { userInfo, uodateUser, upload } from '@/api/register'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      list: [],
      Mobileshow: false,
      Usernameshow: false,
      newUsername: '',
      newMobile: '',
      rules: {
        mobile: [
          {
            required: true,
            message: '手机号不能为空'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式错误'
          }
        ]
      },
      showGender: false,
      isShowMask: false,
      img: '',
      file: '',
      pic: '',
      showBirthday: false,
      currentDate: '',
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(),
      addressshow: false,
      newaddress: '',
      notesshow: false,
      newnotes: ''
    }
  },
  // components: {
  //   VueCropper
  // },
  computed: {
    ...mapState('user', ['token'])
  },

  async created() {
    if (this.token.length === 0) {
      return
    }
    const {
      data: { data }
    } = await userInfo(this.token)
    this.list = data.userInfo
  },
  methods: {
    // 修改头像
    async afterRead(file) {
      this.file = file.file
      const fd = new FormData()
      fd.append('file', this.file)
      const res = await upload(fd)
      this.pic = res.data.data.savePath
      const { data } = await uodateUser({
        id: this.list.id,
        icon: this.pic
      })
      if (data.errno === 0) {
        this.$toast(data.errmsg)
        this.list = data.data
      } else {
        this.$toast('修改失败')
      }
    },
    // 修改昵称
    async showUsername() {
      this.Usernameshow = true
      await this.$nextTick()
      this.$refs.showUsername.focus()
    },
    async UsernameFn() {
      if (this.newUsername.length < 3 || this.username.length > 8) {
        return this.$toast('昵称不符合规范')
      }
      const { data } = await uodateUser({
        id: this.list.id,
        username: this.newUsername
      })
      this.Usernameshow = false
      this.newUsername = ''
      if (data.errno === 0) {
        this.$toast(data.errmsg)
        this.list = data.data
      } else {
        this.$toast('修改失败')
      }
    },
    // 修改手机号
    async showMobile() {
      this.Mobileshow = true
      await this.$nextTick()
      this.$refs.showMobile.focus()
    },
    async MobileFn() {
      const { data } = await uodateUser({
        id: this.list.id,
        mobile: +this.newMobile
      })
      this.Mobileshow = false
      this.newMobile = ''
      if (data.errno === 0) {
        this.$toast(data.errmsg)
        this.list = data.data
      } else {
        this.$toast('修改失败')
      }
    },
    // 修改性别
    async updateGender(num) {
      if (num !== this.list.sex) {
        try {
          const { data } = await uodateUser({
            id: this.list.id,
            sex: num
          })
          this.$toast(data.errmsg)
          this.list = data.data
          // 重新获取个人信息
        } catch {
          this.$toast('修改失败')
        }
      }
      this.showGender = false
    },
    // 修改生日
    showBirthdayFn() {
      this.showBirthday = true
      this.currentDate = new Date(this.list.birthday) || ''
    },
    async updateBirthday() {
      const { data } = await uodateUser({
        id: this.list.id,
        birthday: moment(this.currentDate).format('YYYY-MM-DD')
      })
      if (data.errno === 0) {
        this.$toast(data.errmsg)
        this.list = data.data
      } else {
        this.$toast('修改失败')
      }
      this.showBirthday = false
    },
    // 修改地址
    async showAddress() {
      this.addressshow = true
      await this.$nextTick()
      this.$refs.showaddress.focus()
    },
    async addressFn() {
      const { data } = await uodateUser({
        id: this.list.id,
        address: this.newaddress
      })
      this.addressshow = false
      this.newaddress = ''
      if (data.errno === 0) {
        this.$toast(data.errmsg)
        this.list = data.data
      } else {
        this.$toast('修改失败')
      }
    },
    // 修改个性留言
    async showNotes() {
      this.notesshow = true
      await this.$nextTick()
      this.$refs.showNotes.focus()
    },
    async notesFn() {
      const { data } = await uodateUser({
        id: this.list.id,
        notes: this.newnotes
      })
      this.notesshow = false
      this.newnotes = ''
      if (data.errno === 0) {
        this.$toast(data.errmsg)
        this.list = data.data
      } else {
        this.$toast('修改失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
::v-deep {
  .van-nav-bar__content {
    background-color: #3196fa;
  }
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-icon.van-icon-arrow-left.van-nav-bar__arrow {
    color: #fff;
  }
}

.content {
  padding: 16px 16px 160px;
}

// .mask {
//   width: 100%;
//   height: 100%;
//   position: fixed;
//   top: 0;
//   left: 0;
//   z-index: 999;
//   .confirm,
//   .cancel {
//     position: absolute;
//     bottom: 0;
//   }
//   .confirm {
//     left: 0;
//   }
//   .cancel {
//     right: 0;
//   }
// }
</style>
